import { Vector2 } from "stl-typescript"

export class SelectBox {
    parent: Selector
    selectBoxDom: HTMLElement
    container: HTMLElement
    canvas: HTMLCanvasElement
    enable: boolean = true
    isStart: boolean = false
    beginPoint: Vector2 = new Vector2(0, 0)
    endPoint: Vector2 = new Vector2(0, 0)
    width: number
    height: number
    x: number
    y: number

    onchange: (
        x1: number,
        y1: number,
        x2: number,
        y2: number,
        altKey: boolean
    ) => void | null = null
    mousedownHandler(ev: MouseEvent) {
        if (!this.enable) return
        if (ev.button === 2 && ev.shiftKey) {
            this.isStart = true
            this.beginPoint.set(ev.x, ev.y)
            this.selectBoxDom.style.display = "block"
            this.selectBoxDom.style.left = `${ev.x}px`
            this.selectBoxDom.style.top = `${ev.y}px`
            this.selectBoxDom.style.width = "0px"
            this.selectBoxDom.style.height = "0px"
        }
    }
    mousemoveHandler(ev: MouseEvent) {
        if (!this.enable || !this.isStart) return
        const width = ev.x - this.beginPoint.x
        const height = ev.y - this.beginPoint.y
        this.update(this.beginPoint.x, this.beginPoint.y, width, height)
    }
    mouseupHandler(ev: MouseEvent) {
        if (!this.enable || !this.isStart) return
        this.isStart = false
        this.selectBoxDom.style.display = "none"
        this.endPoint.set(ev.x, ev.y)
        this.onchange &&
            this.onchange(
                this.beginPoint.x,
                this.beginPoint.y,
                this.endPoint.x,
                this.endPoint.y,
                ev.altKey
            )
    }

    constructor(parent: Selector, canvas:HTMLCanvasElement , container: HTMLElement) {
        this.parent = parent
        this.canvas = canvas
        this.destroy()
        this.createSelectBoxDom(container)
        this.register()
    }

    createSelectBoxDom(container) {
        if (this.selectBoxDom) return
        this.selectBoxDom = document.createElement("div")
        this.selectBoxDom.style.position = "absolute"
        this.selectBoxDom.style.border = "2px solid #74b9ff"
        this.selectBoxDom.style.backgroundColor = "rgba(116, 185, 255, 0.3)"
        this.selectBoxDom.style.pointerEvents = "none"
        this.selectBoxDom.style.display = "none"
        this.selectBoxDom.style.zIndex = "9999"
        this.container = container
        container.appendChild(this.selectBoxDom)
    }

    register() {
        this.canvas.addEventListener(
            "mousedown",
            this.mousedownHandler.bind(this)
        )
        this.canvas.addEventListener(
            "mousemove",
            this.mousemoveHandler.bind(this)
        )
        this.canvas.addEventListener(
            "mouseup",
            this.mouseupHandler.bind(this)
        )
    }

    destroy() {
        if (!this.canvas) return
        this.mousedownHandler &&
            this.canvas.removeEventListener(
                "mousedown",
                this.mousedownHandler
            )
        this.mousemoveHandler &&
            this.canvas.removeEventListener(
                "mousemove",
                this.mousemoveHandler
            )
        this.mouseupHandler &&
            this.canvas.removeEventListener("mouseup", this.mouseupHandler)
    }

    update(x: number, y: number, width: number, height: number): void {
        if (width >= 0 && height >= 0) {
            this.selectBoxDom.style.left = x + "px"
            this.selectBoxDom.style.top = y + "px"
            this.x = x
            this.y = y
        }

        if (width < 0 && height < 0) {
            this.selectBoxDom.style.left = x + width + "px"
            this.selectBoxDom.style.top = y + height + "px"
            this.x = x + width
            this.y = y + height
        }

        if (width > 0 && height < 0) {
            this.selectBoxDom.style.left = x + "px"
            this.selectBoxDom.style.top = y + height + "px"
            this.x = x
            this.y = y + height
        }

        if (width < 0 && height > 0) {
            this.selectBoxDom.style.left = x + width + "px"
            this.selectBoxDom.style.top = y + "px"
            this.x = x + width
            this.y = y
        }

        this.width = Math.abs(width)
        this.height = Math.abs(height)
        this.selectBoxDom.style.width = `${Math.abs(width)}px`
        this.selectBoxDom.style.height = `${Math.abs(height)}px`
    }

    getOutLinePoints() {
        return [
            [this.x, this.y],
            [this.x + this.width, this.y],
            [this.x + this.width, this.y + this.height],
            [this.x, this.y + this.height],
        ]
    }
}
export class Selector {
    selectBoxDom: HTMLElement
    selectBox: SelectBox
    container: HTMLElement
    innerContainer: HTMLElement

    constructor(canvas: HTMLCanvasElement , container: HTMLElement) {
        this.container = container
        this.selectBox = new SelectBox(this, canvas ,this.container)
    }
}
